<template>
    
    <div class="vertical">
        <div style="width: 100%;background-color: #0079fe;">
            <h2 style="color: aliceblue;">学生信息列表</h2>
        </div>

        <div style="width: 100%;">
            <el-row class="search">
                <el-col :span="2">
                    <span> 学号：</span>
                </el-col>
                <el-col :span="2">
                    <el-input v-model="input1" style="width: 100px" placeholder="学号" />
                </el-col>
                <el-col :span="2">
                    <span> 姓名：</span>
                </el-col>
                <el-col :span="2">
                    <el-input v-model="input2" style="width: 100px" placeholder="姓名" />
                </el-col>
                <el-col :span="3">
                    <span> 身份证号：</span>
                </el-col>
                <el-col :span="2">
                    <el-input v-model="input3" style="width: 100px" placeholder="身份证号" />
                </el-col>
                <el-col :span="2">
                </el-col>
                <el-col :span="2">
                    <el-form-item>
                        <el-button type="primary" @click="search()">搜索</el-button>
                    </el-form-item>
                </el-col>

                <el-col :span="2">
                    <el-form-item>
                        <el-button type="primary" @click="add()">添加</el-button>
                    </el-form-item></el-col>
            </el-row>
        </div>

        <div style="width: 100%;">
            <el-table :data="tableData" style="width: 100%">
                <el-table-column type="index" label="序号" width="80" />
                <el-table-column prop="student_id" label="学号" width="120" />
                <el-table-column prop="college" label="学院" width="120" />
                <el-table-column prop="major" label="专业" width="120" />
                <el-table-column prop="grade" label="年级" width="120" />
                <el-table-column prop="name" label="姓名" width="120" />

                <el-table-column prop="gender" label="性别" width="120">
                    <template #default="scope">
                        <div v-if="scope.row.gender =='M'">男</div>
                        <div v-if="scope.row.gender =='F'">女</div>
                    </template>
                </el-table-column>
                <el-table-column prop="id_card" label="身份证号" width="120" />
                <el-table-column fixed="right" label="操作" min-width="120">
                    <template #default="scope">
                        <el-button link type="primary" size="small" @click="handleDelete(scope.row.student_id)">
                            删除
                        </el-button>
                        <el-button link type="primary" size="small" @click="upData(scope.row.student_id)">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
            <div>
      <!-- 分页 -->
   <el-pagination
      v-model:current-page="currentPage4"
      v-model:page-size="pageSize4"
      :page-sizes="[10, 20, 30, 40]"
      :size="size"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total=total
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      style="margin-top: 10px;"
    />
    </div>
    </div>

</template>


<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import axios from 'axios';
import { useRouter} from 'vue-router';
import { useRoute} from 'vue-router';

const router =useRouter()

var input1 = ref('')
var input2 = ref('')
var input3 = ref('')
let updateId=ref('')

// 分页
const currentPage4 = ref(1)
const pageSize4 = ref(5)
const total=ref(1)
// 跳转添加页面
function upData(id){
    router.push('addstu/'+id)
}
// 添加
function add(){
    router.push('addstu')
}

// 删除
function handleDelete(id){
    var con=confirm('确定删除')
    if (!con){
        return true
    }else{
            axios.delete("http://127.0.0.1:8000/student/delete/"+id,{})
    .then(res => {
        getdata()
        console.log(res)
    })
    .catch(err => {
        console.error(err); 
    })
    }
}

const tableData = ref([{}])

// 搜索
function search(){
    var param={
        student_id:input1.value,
        name:input2.value,
        id_card:input3.value,
        page:currentPage4.value,
        pageSize:pageSize4.value
    }
    axios.get("http://127.0.0.1:8000/student/getdata/", {
        params: param
    })
    .then(res => {
        tableData.value = res.data.data
        total.value=res.data.total
        console.log(res);
    })

}

// 获取首页数据
function getdata() {
    axios.get("http://127.0.0.1:8000/student/getdata/",{
        params:{
            page:currentPage4.value,
            pageSize:pageSize4.value
        }
    }
    )
        .then(res => {
            tableData.value = res.data.data
            total.value=res.data.total
            console.log(res.data.data);
            console.log(tableData.value);

            console.log(res)
        })
        .catch(err => {
            console.error(err);
        })
}

//分页
function handleSizeChange(size) {
    pageSize4.value = size
    // daishanchu.value=item
    getdata()
}
function handleCurrentChange(page) {
    currentPage4.value = page
    getdata()
}

const message = ref('Hello, Vue 3!');
onMounted(() => {
    // Your code here
    getdata()

});

// 在组件卸载前执行的操作
onUnmounted(() => {

});



</script>
<style>
.vertical {
    /* display: flex; */
    flex-direction: column;
    gap: 10px;
    /* 可选：设置子元素之间的间距 */
}
</style>
